<template>
  <div class="borrow-book-container">
    <!-- 返回主页按钮 -->
    <router-link to="/">
      <el-button type="primary" class="back-home-btn">
        <el-icon><ArrowLeft /></el-icon>
        返回主页
      </el-button>
    </router-link>

    <h1 class="page-title">借阅购物车</h1>

    <!-- 借阅为空状态 -->
    <div v-if="cart.length === 0" class="empty-state">
      <el-empty description="暂无借阅记录"></el-empty>
    </div>

    <!-- 借阅卡片列表 -->
    <div v-else class="books-grid">
      <el-card v-for="book in cart" :key="book.id" class="book-card">
        <div class="book-info">
          <div class="book-cover" :style="{ backgroundImage: book.coverUrl ? `url(${book.coverUrl})` : 'url(/book-covers/default.jpg)' }"></div>
          <div class="book-details">
            <h3 class="book-title">{{ book.title }}</h3>
            <p class="book-author">作者: {{ book.author }}</p>
            <p class="book-isbn">ISBN: {{ book.isbn }}</p>
            <div class="cart-actions">
              <span class="book-price">借阅押金: ¥{{ book.price || 50 }}</span>
            </div>
            <el-button type="danger" size="small" class="return-btn" @click="handleRemove(book.id)">移除</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div class="checkout-section" v-if="cart.length > 0">
      <el-button type="primary" size="large" @click="handleCheckout">
        结算 ({{ cart.length }}本)
      </el-button>
    </div>
</div>
</template>

<script>
import { ArrowLeft } from '@element-plus/icons-vue';
import { cart, removeFromCart } from '@/services/cartService';
import { borrowBook } from '@/services/bookService';
import { ElMessage } from 'element-plus';


export default {
  name: 'BorrowBook',
  components: {
    ArrowLeft
  },
  data() {
    return {
      cart
    };
  },
  methods: {
    handleRemove(bookId) {
      removeFromCart(bookId);
      ElMessage.success('已从购物车移除');
    },
    async handleCheckout() {
      if (this.cart.length === 0) {
        ElMessage.warning('购物车为空，无法结算');
        return;
      }
      try {
        // 模拟借阅所有购物车书籍
        const userId = localStorage.getItem('userId') || '1'; // 使用默认用户ID
        for (const book of this.cart) {
          await borrowBook(book.id, userId);
        }
        // 清空购物车
        this.cart.length = 0;
        ElMessage.success('所有书籍借阅成功');
        this.$router.push('/');
      } catch (error) {
        ElMessage.error('借阅失败: ' + (error.message || '操作失败'));
      }
    }
  }
};
</script>

<style scoped>
.borrow-book-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-home-btn {
  margin-bottom: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.book-card {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.book-info {
  display: flex;
  padding: 15px;
}

.book-cover {
  width: 100px;
  height: 150px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-right: 15px;
}

.book-details {
  flex: 1;
}

.book-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: #1a1a1a;
}

.book-author,
.book-isbn {
  margin-bottom: 5px;
  color: #666;
  font-size: 14px;
}

.borrow-dates {
  margin: 15px 0;
  font-size: 13px;
  color: #888;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.due-date {
  color: #ff4d4f;
  font-weight: 500;
}

.return-btn {
  margin-top: 10px;
}

.empty-state {
  text-align: center;
  padding: 50px 0;
}
</style>